import React,{useState ,useEffect} from 'react'
import {useDispatch,useSelector} from "react-redux"
import querystring from 'querystring'


import { Input,Tree,Button ,message  } from 'antd';
const { TextArea } = Input;
export default function RoleAddModal(props) {
    //选择的哪些复选框，菜单
    const [menuId,setMenuId]=useState([])
    //角色名称
    const [roleName,setRoleName]=useState('')
    //角色描述
    const [remark,setRemark]=useState('')

    // 权限相关代码开始
    const onCheck = (val,e) => {
        setMenuId([...val,...e.halfCheckedKeys])
    };
    //权限相关代码结束
    const dispatch = useDispatch()
    //获取仓库所有菜单数据
    const result = useSelector(state=>state.userRc.menus)

    //一进来执行
    useEffect(()=>{
        dispatch({
            type:'getMenu'
        })
    },[])
    //提交数据
    const  postData=()=>{
        let str=menuId.join(',')
        let result = {
            roleName,
            remark,
            menuId:str
        }
        dispatch({
            type:'addRole',
            payload: querystring.stringify(result).replaceAll('%2C',',')
        })
        props.getAllRole()
        props.onClose()

        message.success('添加成功')

    }


    return (
        <>
        <div style={{display:'flex',  alignItems: 'center',marginBottom: '20px' }}>
            <label htmlFor="">角色名称：</label>
            <Input placeholder="请输入角色名称" style={{width:'75%'}} onChange={(e)=>setRoleName(e.target.value)}/>
        </div>
        <div style={{display:'flex',  alignItems: 'center',marginBottom: '20px' }}>
            <label htmlFor="" >角色描述：</label>
            <TextArea rows={4} style={{width:'75%'}} onChange={(e)=>setRemark(e.target.value)}/>
        </div>
        {/* 权限选择 */}
        <div style={{display:'flex',marginBottom: '20px' }}>
            <label htmlFor="" >权限选择：</label>
            <Tree
                checkable
                onCheck={onCheck}
                treeData={result}
            />
        </div>
        <Button type="primary" onClick={postData}>提交</Button>
            
            
        </>
    )
}
